<template>
  <div class="sidebar">
    <el-menu
      :default-active="defaultActiveIndex"
      class="el-menu-vertical-demo"
      background-color="#324157"
      text-color="#fff"
      @open="changeItemBG"
      @select="selectItems"
    >
      <!-- 项目列表 -->
      <el-submenu index="1" key="1">
        <template slot="title"
          ><i class="el-icon-document"></i>项目列表</template
        >
        <el-menu-item
          class="elmenuitem"
          style="background-color:#2C384D"
          v-for="subItem in projListData"
          :key="subItem.index"
          :index="subItem.index"
          >{{ subItem.name }}
        </el-menu-item>
      </el-submenu>

      <!-- 管理 -->
      <el-submenu index="2" key="2">
        <template slot="title"
          ><i class="el-icon-info"></i>管理</template
        >
        <el-menu-item
          class="elmenuitem"
          style="background-color:#2C384D"
          key="userManager"
          index="userManager"
          >用户管理
        </el-menu-item>

        <el-menu-item
          class="elmenuitem"
          style="background-color:#2C384D"
          key="projManager"
          index="projManager"
          >项目管理
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import * as commonConst from "../common/commonConst";
import { projList } from "../api/getData";

export default {
  data() {
    return {
      defaultActiveIndex: "",
      projListData: [],
      items: [
        {
          icon: "el-icon-document",
          index: "1",
          title: "项目",
          subs: [
            {
              index: "homeManager",
              title: "极简汇率-App"
            }
          ]
        },
        {
          icon: "el-icon-info",
          index: "2",
          title: "管理",
          subs: [
            {
              index: "userManager",
              title: "用户管理"
            },
            {
              index: "projManager",
              title: "项目管理"
            }
          ]
        }
      ]
    };
  },

  created() {
    //接收通知刷新
    this.XCEventHandler.$on(commonConst.proj_change_event, listData => {
      let datas = listData;
      for (let item of datas) {
        item.index = "homeManager" + "##" + item.id;
      }
      this.projListData = datas;
    });
  },

  mounted() {
    //解决menu-sub-item变色的问题
    this.addItemStyleChange();

    setTimeout(async () => {
      this.getProjList(true);
    }, 20);
  },

  methods: {
    changeItemBG() {
      // console.log("xxxxxxxxxxxxxxxxx")
      let m_items = document.getElementsByClassName("elmenuitem");
      for (let i = 0; i < m_items.length; i++) {
        let m_item = m_items[i];
        m_item.style.backgroundColor = "#2C384D";
      }
    },

    //监听鼠标移出,覆盖elementUI颜色改变
    addItemStyleChange() {
      let m_items = document.getElementsByClassName("elmenuitem");
      for (let i = 0; i < m_items.length; i++) {
        let m_item = m_items[i];
        m_item.addEventListener("mouseout", function(ev) {
          setTimeout(() => {
            m_item.style.backgroundColor = "#2C384D";
          }, 20);

          //console.log("ssssssssss")
        });
      }
    },

    //获取项目列表
    /*
    @locateManager为布尔值,表示是否需要定位到词条管理
    */
    async getProjList(locateManager) {
      try {
        const resp = await projList();
        if (resp.errorCode == 0) {
          // console.log("datas:", resp.data);
          let datas = resp.data == null ? [] : resp.data;

          for (let item of datas) {
            item.index = "homeManager" + "##" + item.id;
          }
          this.projListData = datas;
          if (locateManager == true && datas.length > 0) {
            setTimeout(async () => {
              this.selectItems(datas[0].index);
            }, 100);
          }
        }
      } catch (err) {
        this.$message({
          type: "error",
          message: commonConst.error_connect_reload
        });
      }
    },

    //点击选中的item
    selectItems(index) {
      console.log(index);

      if (this.defaultActiveIndex == index) {
        return;
      }

      this.defaultActiveIndex = index;

      //如果是某个项目词条
      if (index.indexOf("homeManager") == 0) {
        let strs = index.split("##");
        let m_projID = strs[1];

        this.$router.push({
          path: "/homeManager",
          query: { projID: m_projID }
        });
      } else {
        this.$router.push({
          path: "/" + index
        });
      }
    }
  },
  computed: {
    //----没用到 ,根据路由自动高亮----
    //onRoutes() {
    //  return this.$route.path.replace("/", "");
    //}
  }
};
</script>

<style scoped lang="less">
.sidebar {
  display: block;
  position: absolute;
  width: 250px;
  left: 0;
  top: 70px;
  bottom: 0;
  overflow: auto;
}
.sidebar > ul {
  height: 100%;
}
</style>
